<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>车位管理</span>
      </div>
      <div>
        <span class="c1">车位状态:</span
        ><el-input class="c2" placeholder="请输入内容"></el-input>
        <span class="c3">车位编号:</span
        ><el-input class="c2" placeholder="请输入内容"></el-input>
        <el-button style="float: right; padding: 5px 0" type="text"
          >重置</el-button
        >
        <el-button style="float: right; padding: 5px 0" type="text" class="b1"
          >查询</el-button
        >
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>车位管理</span>
        <div class="e2">
          <el-button
            type="text"
            style="margin-right: 10px"
            @click="add(), (dialogFormVisible = true)"
            >新建</el-button
          >
          <el-button type="text" style="margin-right: 10px">批量操作</el-button>
        </div>
      </div>

      <div>
        <el-table
          ref="multipleTable"
          @current-change="handleCurrentChange"
          :data="pageinfo"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column label="区域" width="160">
            <template slot-scope="scope">{{
              scope.row.communityName
            }}</template>
          </el-table-column>
          <el-table-column prop="serialNumber" label="车位编号" width="120">
          </el-table-column>
          <el-table-column prop="carpArea" label="面积" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="building" label="楼层" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="vehicelType"
            label="车位类型"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="vehicleState"
            label="车位状态"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="绑定住户"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="text" @click="toa(scope.row)">审核</el-button>
              <el-button type="text" @click="updateInfo(scope.row),dialogFormVisible1=true">编辑</el-button>
              <el-button
                type="text"
                @click="deleteInfo(scope.row.vehicleNumberId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="carInfo.pageNum"
          :page-size="carInfo.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="carInfo.totalSize"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="车位管理/基础信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <span style="margin-left: 50px">区域名称</span
        ><el-select
          filterable
          placeholder="请选择区域"
          v-model="communityList.communityId"
          style="margin-left: 15px; margin-bottom: 20px"
          @change="selectXQ()"
        >
          <el-option
            v-for="stu in XQinfoList"
            :key="stu.communityId"
            :label="stu.communityName"
            :value="stu.communityId"
          >
          </el-option>
        </el-select>
        <el-form-item label="车位编号" :label-width="formLabelWidth">
          <el-input v-model="form.serialNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位面积(m²)" :label-width="formLabelWidth">
          <el-input v-model="form.carpArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="form.building" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位类型" :label-width="formLabelWidth">
          <el-input v-model="form.vehicelType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位状态" :label-width="formLabelWidth">
          <el-input v-model="form.vehicleState" autocomplete="off"></el-input>
        </el-form-item>
        <span style="margin-left: 50px">绑定住户</span
        ><el-select
          filterable
          placeholder="请选择住户"
          v-model="User.userId"
          style="margin-left: 15px; margin-bottom: 20px"
          @change="selectAlluser()"
        >
          <el-option
            v-for="user in Userlist"
            :key="user.userId"
            :label="user.userName"
            :value="user.userId"
          >
          </el-option>
        </el-select>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="repairAdd('form')">提 交</el-button>
        <el-button @click="dialogFormVisible = false">返 回</el-button>
      </div>
    </el-dialog>

    <el-dialog title="车位管理/基础信息" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <span style="margin-left: 50px">区域名称</span
        ><el-select
          filterable
          placeholder="请选择区域"
          v-model="communityList.communityId"
          style="margin-left: 15px; margin-bottom: 20px"
          @change="selectXQ()"
        >
          <el-option
            v-for="stu in XQinfoList"
            :key="stu.communityId"
            :label="stu.communityName"
            :value="stu.communityId"
          >
          </el-option>
        </el-select>
        <el-form-item label="车位编号" :label-width="formLabelWidth">
          <el-input v-model="form.serialNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位面积(m²)" :label-width="formLabelWidth">
          <el-input v-model="form.carpArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="form.building" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位类型" :label-width="formLabelWidth">
          <el-input v-model="form.vehicelType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位状态" :label-width="formLabelWidth">
          <el-input v-model="form.vehicleState" autocomplete="off"></el-input>
        </el-form-item>
        <span style="margin-left: 50px">绑定住户</span
        ><el-select
          filterable
          placeholder="请选择住户"
          v-model="User.userId"
          style="margin-left: 15px; margin-bottom: 20px"
          @change="selectAlluser()"
        >
          <el-option
            v-for="user in Userlist"
            :key="user.userId"
            :label="user.userName"
            :value="user.userId"
          >
          </el-option>
        </el-select>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="repairupdate('form')">提 交</el-button>
        <el-button @click="dialogFormVisible1 = false">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "CW",
  data() {
    return {
      dialogFormVisible1:false,
      Userlist: {},
      User: {
        userId: undefined,
        userName: undefined,
      },
      communityList: {
        communityId: undefined,
        communityName: undefined,
      },
      XQinfoList: {},
      form: {
        serialNumber: "",
        carpArea: "",
        building: "",
        vehicelType: "",
        vehicleState: "",
        vehicleNumberId:"",
        communityId:"",
        userId:"",
        serialNumber:"",
        communityName:""
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      pageinfo: {},
      carInfo: {
        vehicleNumberId: undefined,
        communityId: undefined,
        userId: undefined,
        serialNumber: undefined,
        vehicelType: undefined,
        type: undefined,
        vehicleState: undefined,
        carpArea: undefined,
        building: undefined,
        communityName: undefined,
        pageRequest: {
          pageNum: undefined,
          pageSize: undefined,
        },
      },
    };
  },
  methods: {
    toa(row){
      this.$router.push({
        path:'/Approval',
        query:{
          vehicleNumberId:row.vehicleNumberId
        }
      })
    },
    updateInfo(data){
      this.form.vehicleNumberId=data.vehicleNumberId
      this.form.serialNumber=data.serialNumber
      this.form.carpArea=data.carpArea
      this.form.building=data.building
      this.form.vehicelType=data.vehicelType
      this.form.vehicleState=data.vehicleState
      this.User.userId=data.userId
      this.communityList.communityId=data.communityId
    },
    repairupdate() {
      this.$axios
        .post("/carshop/vehicle-number/updatePcInfo", {
          vehicleNumberId: this.form.vehicleNumberId,
          communityId:this.communityList.communityId,
          userId:this.User.userId,
          serialNumber: this.form.serialNumber,
          vehicelType: this.form.vehicelType,
          vehicleState: this.form.vehicleState,
          carpArea: this.form.carpArea,
          building:this.form.building
        })
        .then((res) => {
          this.getAllinfoBypage();
          this.dialogFormVisible1 = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
        })
        .catch((e) => {
          this.$message.error("修改失败");
        });
    },
    deleteInfo(vehicleNumberId) {
      this.$confirm("此操作将永久删除用户信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/carshop/vehicle-number/delPcInfo", {
              params: {
                vehicleNumberId: vehicleNumberId,
              },
            })
            .then((response) => {
              this.getAllinfoBypage();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((e) => {});
        })
        .catch((e) => {});
    },
    add() {
      (this.form.serialNumber = ""),
        (this.form.carpArea = ""),
        (this.form.building = ""),
        (this.form.vehicelType = ""),
        (this.form.vehicleState = ""),
        (this.communityList = {}),
        (this.User = {});
    },
    repairAdd() {
      this.$axios
        .post("/carshop/vehicle-number/insertPcInfo", {
          userId: this.User.userId,
          communityId: this.communityList.communityId,
          serialNumber: this.form.serialNumber,
          carpArea: this.form.carpArea,
          building: this.form.building,
          vehicelType: this.form.vehicelType,
          vehicleState: this.form.vehicleState,
        })
        .then((res) => {
          this.getAllinfoBypage();
          this.dialogFormVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
        })
        .catch((e) => {
          this.$message.error("添加失败");
        });
    },
    selectAlluser() {
      this.$axios.get("/carshop/vehicle-number/selectAllUser").then((res) => {
        if (res.data.code === 20000) {
          this.Userlist = res.data.data.data;
        }
      });
    },
    selectXQ() {
      this.$axios.get("/carshop/vehicle-area/info").then((res) => {
        if (res.data.code === 20000) {
          this.XQinfoList = res.data.data.data;
        }
      });
    },
    handleCurrentChange(val) {
      this.getAllinfoBypage(val);
    },
    getAllinfoBypage(pageNum, pageSize) {
      if (pageNum == null || pageNum == undefined) {
        pageNum = 1;
      }
      if (pageSize == undefined || pageSize == null) {
        pageSize = 7;
      }
      this.carInfo.pageRequest.pageNum = pageNum;
      this.carInfo.pageRequest.pageSize = pageSize;
      const config = {
        headers: {
          "content-type": "application/json",
        },
      };
      const formData = JSON.stringify(this.carInfo);
      this.$axios
        .post("/carshop/vehicle-number/selectnumInfo", formData, config, {
          params: {
            cwl: this.cwl,
          },
        })
        .then((res) => {
          if (res.data.code == 20000) {
            this.pageinfo = res.data.data.data.content;
          }
        });
    },
  },

  mounted() {
    this.getAllinfoBypage();
    this.selectXQ();
    this.selectAlluser();
  },
};
</script>

<style scoped>
.c3 {
  float: left;
  margin-top: 10px;
  margin-left: 40px;
}
.e2 {
  float: right;
  margin-bottom: 20px;
}
.b1 {
  margin-right: 20px;
}
.box-card {
  margin-top: 20px;
}
.c1 {
  float: left;
  margin-top: 10px;
}
.c2 {
  float: left;
  width: 20%;
  margin-bottom: 20px;
  margin-left: 20px;
}
</style>